<template>
	<view class="informationList">
		<navBar class="s_navBar" isBack backColor="#333" background="#fff">
			<view class="s_nCenter" slot="center">
				<view class="s_nBg"><image :src="storeInfo.back_img"></image></view>
				<view class="s_nInput">
					<view class="s_nIcon iconfont icon-search" ></view>
					<input confirm-type="search" type="text" v-model="keyword" @confirm="searchData" placeholder="搜索您感兴趣的内容吧" placeholder-style=" #939393;" />
				</view>
			</view>
		</navBar>
		<!-- 内容 -->
		<view class="content">
			<view class="item" v-for="(item,index) in infoList" :key="index" @click="toInformationInfo(item.id)">
				<view class="text">
					<view class="tit omit-3">
						<!-- <rich-text class="omit-3" :nodes="item.content | formatRichText"></rich-text> -->
						<!-- <u-parse :html="item.content"></u-parse> -->
						{{item.title}}
					</view>
					<span style="margin-top:20rpx;">{{$utils.getTimeRelation(item.create_time*1000)}}</span>
				</view>
				<image v-if="item.type==1" :src="item.media[0].path" mode=""></image>
				<image v-if="item.type==2" :src="item.media[0].cover" mode=""></image>
			</view>
			<u-loadmore :status="status" :icon-type="iconType" :load-text="loadText" />
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				status: 'loadmore',
				iconType: 'flower',
				loadText: {
					loadmore: '轻轻上拉',
					loading: '努力加载中',
					nomore: '实在没有了~'
				},
				infoList:[],
				keyword:'',
				page:1,
				pagesize:10,
				moduleType:''
			}
		},
		onLoad(options) {
			this.moduleType = options.moduleType
			this.getInfoList()
		},
		filters: {
			/**
			* 处理富文本里的图片宽度自适应
			* 1.去掉img标签里的style、width、height属性
			* 2.img标签添加style属性：max-width:100%;height:auto
			* 3.修改所有style里的width属性为max-width:100%
			* 4.去掉<br/>标签
			* @param html
			* @returns {void|string|*}
			*/
			formatRichText (html) { //控制小程序中图片大小
				let newContent= html.replace(/<img[^>]*>/gi,function(match,capture){
					match = match.replace(/style="[^"]+"/gi, '').replace(/style='[^']+'/gi, '');
					match = match.replace(/width="[^"]+"/gi, '').replace(/width='[^']+'/gi, '');
					match = match.replace(/height="[^"]+"/gi, '').replace(/height='[^']+'/gi, '');
					return match;
				});
				newContent = newContent.replace(/style="[^"]+"/gi,function(match,capture){
					match = match.replace(/width:[^;]+;/gi, 'max-width:100%;').replace(/width:[^;]+;/gi, 'max-width:100%;');
					return match;
				});
				newContent = newContent.replace(/<br[^>]*\/>/gi, '');
				newContent = newContent.replace(/\<img/gi, '< img style="max-width:100%;height:auto;display:inline-block;margin:10rpx auto;"');
				return newContent;
			} 
		},
		onReachBottom() {
			this.page++
			this.status = 'loading'
			let user_id=this.$store.state.index.userId
			let params = {
				user_id,
				page:this.page,
				pagesize:this.pagesize,
				role:this.moduleType=='superHK'?'steward':''
			}
			this.$api.getInformationList(params).then(res=>{
				console.log(res,'资讯列表')
				if(res.code==1){
					if(!res.data.length){
						this.status = 'nomore'
					}else{
						this.status = 'loading'
					}
					this.infoList = this.infoList.concat(res.data)
				}
			})
		},
		methods:{
			getInfoList(){
				this.page=1
				uni.showLoading({
					title:'加载中...'
				})
				let user_id=this.$store.state.index.userId
				let params = {
					user_id,
					page:this.page,
					pagesize:this.pagesize,
					role:this.moduleType=='superHK'?'steward':''
				}
				this.$api.getInformationList(params).then(res=>{
					console.log(res,'资讯列表')
					if(res.code==1){
						if(res.data.length<10){
							this.status = 'nomore'
						}
						this.infoList = res.data?res.data:[]
					}
				})
				uni.hideLoading()
			},
			// 搜索
			searchData(){
				// const that = this;
				// that.getInfoList()
			},
			// 点击进入详情
			toInformationInfo(id){
				uni.navigateTo({
					url:'informationInfo?information_id='+id
				})
			}
		}
	}
</script>

<style lang="scss">
	.informationList{
		// 导航栏
		.s_navBar {
			.s_nCenter {width: 100%;}
			.s_nBg {width: 100vw;background: rgba(255,255,255,0.1);position: fixed;top: 0;left: 0;z-index: -1;filter: blur(1px);}
			.s_nInput {color: #939393;width: 400rpx;height: 66rpx; background: #F8F8F8;padding: 0 64rpx;border-radius: 36rpx;position: relative;
				& > input {height: 100%;font-size: 24rpx;}
			}
			.s_nIcon {width: 28rpx;height: 28rpx;line-height: 28rpx;color: #939393;font-size: 28rpx;position: absolute;top: 50%;left: 28rpx;margin-top: -14rpx;}
		}
		
		// 。
		.content{
			padding: 0 24rpx;
			margin-bottom: 24rpx;
			padding-bottom: constant(safe-area-inset-bottom);			padding-bottom: env(safe-area-inset-bottom);
			.item{
				margin: 24rpx auto;
				width: 702rpx;
				padding: 28rpx;
				display: flex;
				justify-content: space-between;
				background-color: #fff;
				border-radius: 16rpx;
				.text{
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					.tit{
						width: 356rpx;
						max-height: 126rpx;
						font: 400 32rpx/42rpx PingFang SC;
						color: #333333;
					}
					span{
						font: 300 24rpx/24rpx PingFang SC;
						color: #6C6C6C;
					}
				}
				image{
					flex-shrink: 0;
					width: 250rpx;
					height: 190rpx;
					border-radius: 8rpx;
				}
			}
		}
	}
</style>
